<template>
  <!--  登录页面 -->
  <div class="login-container" @mousedown="mousedown">
    <!--右上角窗口事件-->
    <div class="login-window">
      <!--换肤按钮-->
      <el-button circle @click="configDarkMode">
        <el-icon v-if="isDarkMode"><Sunny /></el-icon>
        <el-icon v-else><Moon/></el-icon>
      </el-button>
      <!--国际化-->
      <el-dropdown trigger="click" @command="configLang">
        <el-button circle>
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362L368 281.65L401.17 362z" fill="currentColor"></path><path d="M267.84 342.92a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z" fill="currentColor"></path></svg>
        </el-button>
        <template #dropdown >
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="item in config.LANG"
              :key="item.value"
              :command="item"
            >{{  item.name }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!--最小化窗口按钮-->
      <el-button icon="SemiSelect" circle @click="minimizeWindow"/>
      <!--关闭窗口按钮 -->
      <el-button icon="CloseBold" circle @click="closeWindow"/>
    </div>
    <!--  左侧logo  -->
    <div class="login-left">
      <div class="logo-title">
        <h2>{{ t('login.name') }}</h2>
        <h4>{{t('login.slogan')}}</h4>
        <p>{{t('login.describe')}}</p>
      </div>
      <div class="login-mask"></div>
      <div class="logo-img">
        <img alt="logo" src="@/assets/images/data.png">
      </div>
      <div class="logo-footer">
        <p>© 小鹿线客户管理系统 1.0.11</p>
      </div>
    </div>
    <!-- 右侧登录表单 -->
    <div class="login-right">
      <div class="login-form">
        <!--    右侧头部    -->
        <div class="login-header">
          <div class="login-title">
            <img alt="logo" src="@/assets/images/logo.png">
            <label>{{ t('login.title') }}</label>
          </div>
        </div>
        <!--    表单内容    -->
        <el-tabs>
          <el-tab-pane :label="t('login.signInTitle')" lazy>
            <keep-alive>
              <passwordForm />
            </keep-alive>
          </el-tab-pane>
          <el-tab-pane :label="t('login.mobileLogin')" lazy>
            <keep-alive>
              <phoneFrom />
            </keep-alive>
          </el-tab-pane>
        </el-tabs>
        <template v-if="true">
          <div class="login-other">
            <el-divider>{{ t('login.signInOther') }}</el-divider>
            <!--     微信登录       -->
            <el-button circle size="large" type="success">
              <el-icon size="large">
                <ChatDotRound />
              </el-icon>
            </el-button>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n({
  inheritLocale: true, // 继承全局 locale
  useScope: 'global'   // 使用全局翻译资源
})
import passwordForm from "@/login/component/passwordForm.vue";
import phoneFrom from "@/login/component/phoneFrom.vue";
import { onBeforeMount, ref,reactive,ComponentInternalInstance,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// 是否为暗黑模式
const isDarkMode = ref<boolean>(false);
// 是否可以移动窗口
const isMove = ref(false);
// x轴移动距离
const moveX = ref(0);
// y轴移动距离
const moveY = ref(0);
onBeforeMount(()=>{
  //@ts-ignore
  isDarkMode.value = JSON.parse(localStorage.getItem("isDarkMode")) || false;
  changeSkin();
})
// 鼠标按下窗口拖动
const mousedown = (event: MouseEvent) => {
  isMove.value = true;
  moveX.value = event.x;
  moveY.value = event.y;

  document.onmousemove = (ev) => {
    console.log(isMove.value);
    if (isMove.value) {
      const x = ev.screenX - moveX.value;
      const y = ev.screenY - moveY.value;
      //给主进程传入坐标
      const data = {
        appX: x,
        appY: y
      };
      window.electron.ipcRenderer.invoke("moveWindow", data);
    }
  };
  document.onmouseup = () => {
    isMove.value = false;
    document.onmousemove = null;
    document.onmouseup = null;
  };
};
// 点击切换暗黑模式
const configDarkMode = ()=>{
  //@ts-ignore
  isDarkMode.value = !localStorage.getItem("isDarkMode")? true : !JSON.parse(localStorage.getItem("isDarkMode"));
  changeSkin();
// 持久化存储
  localStorage.setItem("isDarkMode", isDarkMode.value.toString())
}
// 切换皮肤样式
const changeSkin = () => {
  // 获取根元素
  const element = document.querySelector("html") as HTMLElement || null;
  if (isDarkMode.value){
    // 切换暗黑模式
    element.className = "dark";
  }else{
    // 切换白天模式
    element.className = "";
  }
}
// 最小化窗口
const minimizeWindow = () => {
  window.electron.ipcRenderer.invoke("minimizeWindow");
}
// 关闭窗口
const closeWindow = () => {
  window.electron.ipcRenderer.invoke("closeWindow");
}
// 切换语言
const config = reactive({
  LANG:[
    {name:"中文",value:'zh-cn'},
    {name:'英文',value:'en'}
  ]
})
const configLang = ( item:{
  name:string
  value:string
})=>{
  //@ts-ignore
  proxy.$i18n.locale = item.value;
  localStorage.setItem("lang", item.value);
}
</script>
<style lang="scss" scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  background-color: #f5f5f5;
  .login-window{
    position: absolute;
    top: 10px;
    right: 30px;
    .el-button {
      margin-left: 10px;
    }
  }
  .login-left {
    background: url("../../assets/images/auth_banner.jpg");
    width: 40%;
    position: relative;

    .logo-title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 2;
      padding: 40px;
      color: #fff;

      h2 {
        font-size: 20px;
      }

      h4 {
        font-size: 18px;
        margin-top: 10px;
      }

      p {
        font-size: 14px;
        margin-top: 10px;
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.6);
      }
    }

    .logo-img {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 80px;
      padding: 40px;
      z-index: 3;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .logo-footer {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      color: #fff;
      padding: 0 40px 40px 40px;
    }
  }

  .login-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }

  .login-right {
    flex: 1;
    display: flex;
    overflow: auto;

    .login-form {
      width: 400px;
      margin: auto;
      padding: 80px 0 0 0;
      height: 70%;

      .login-header {
        margin-bottom: 40px;

        .login-title {
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 40px;
            height: 40px;
            vertical-align: bottom;
            margin-right: 10px;
          }

          label {
            font-size: 26px;
            font-weight: bold;
          }
        }
      }
    }
  }

  .login-other {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
